<template>
  <div class="dashboard-container">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>仪表盘</span>
        </div>
      </template>

      <!-- 系统信息 -->
      <el-descriptions title="系统信息" :column="2" border>
        <el-descriptions-item label="系统名称"
          >Vue3后台管理系统</el-descriptions-item
        >
        <el-descriptions-item label="当前版本">1.0.0</el-descriptions-item>
        <el-descriptions-item label="系统状态">正常运行</el-descriptions-item>
        <el-descriptions-item label="更新时间">2024-11-22</el-descriptions-item>
      </el-descriptions>


    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import BasicTable from '@/components/BasicTable/index.vue';

// 表格数据
const tableData = ref([
  {
    date: '2024-03-20',
    name: '张三',
    address: '北京市朝阳区',
  },
  {
    date: '2024-03-19',
    name: '李四',
    address: '上海市浦东新区',
  },
]);

// 表格列配置
const columns = [
  { prop: 'date', label: '日期', minWidth: 120 },
  { prop: 'name', label: '用户名', minWidth: 100 },
  { prop: 'address', label: '地址', minWidth: 180 },
];
</script>

<style scoped>
.dashboard-container {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
